<template>
	<eui-page-frame topHeight="472">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<eui-nav-bar />
			</view>
			<view class="topbg" :style="[topBg]">
				<view class="top-box">
					<text class="top-box__text-title">新的洽谈</text>
					<text class="top-box__text-content">接触新品牌，留住每一刻合作的价值。</text>
				</view>
				<view class="circle-container" :class="[theme]" @click="addTalk">
					<eui-icons color="#FFFFFF" size="26" type="plusempty"></eui-icons>
				</view>
			</view>
		</template>
		<!-- <eui-page-content > -->
		<view class="footer-view">
			<scroll-view class="scroll-box" scroll-y :refresher-enabled="true" refresher-threshold="45"
				:refresher-triggered="triggered" refresher-background="none" @scrolltolower="lower"
				@refresherrefresh="onRefresh">
				<eui-base-card v-if="dataList.length>0" v-for="(item, index) in dataList" :key="index"
					@click="openDetail(item)" :title="item.c_id">
					<template #left>
						<!-- <view class="e-attachment"> -->
						<image class="e-image" :src="item.cover" mode="aspectFill" />
						<!-- </view> -->
					</template>
					<template #right>
						<view style="margin-right: -12rpx;">
							<eui-tag v-if="item.c_talk_status!==''" :type="getTagType(item.c_talk_status)" size="medium"
								:text="getDictName('招商洽谈状态',item.c_talk_status)" plain plainFill :showBorder="false">
							</eui-tag>
						</view>

					</template>
					<eui-detail-show :items="dataItems" v-model="dataList[index]" size="little"></eui-detail-show>
					<view class="tag-box" v-if="item.c_process_name!='' && item.c_process_name!=null">
						<eui-tag :text="item.c_process_name" plain plainFill :showBorder="false"
							size="medium"></eui-tag>
					</view>
					<view style="text-align: right; margin-top: 10rpx;" v-if="item.c_talk_status=='0'">
						<!--状态是洽谈中的可以继续洽谈-->
						<eui-button type="min" title="继续洽谈" @click.stop="carryTalk(item)"></eui-button>
					</view>
				</eui-base-card>
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无数据</view>
				</view>
			</scroll-view>
		</view>
		<!-- </eui-page-content> -->
	</eui-page-frame>
</template>


<script setup lang="ts">
	import { ref } from 'vue'
	import { init } from '@/hooks/init';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { getRelatedName, getDictName } from '../components/RelatedName.js';
	import useService from '@/hooks/useService';
	import { storeToRefs } from 'pinia';
	import { useThemeStore } from '@/store/themeStore';
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const bgimage = theme._object.theme == 'theme-blue' ? "background-image: url(../../../static/img/rdsImgs/top_zsqt_blue.jpg);" : 'background-image: url(../../../static/img/rdsImgs/top_zsqt_orange.jpg);'
	const topBg = theme._object.theme == 'theme-blue' ? 'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);' : 'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_orange.png);'
	const service = useService({ prefix: "apiApi" });
	const CurrentPage = ref(1);  //第几页
	const PageSize = ref(10);  //每页10条
	const RowsCount = ref(0);  //总条数
	const PageCount = ref(1);  //总页数
	const freshing = ref(false);
	const triggered = ref(false);
	const dataItems = [
		{
			label: "意向客户",
			prop: "c_provider_name",
			type: "text",
			element: {
			},
		},
		{
			label: "楼层品牌",
			prop: "c_bname",
			type: "text",
			element: {
			},
		},
		{
			label: "目标铺位",
			prop: "c_counter_name",
			type: "text",
			element: {
			},
		},
		{
			label: "招商负责",
			prop: "c_business_charge",
			type: "text",
			element: {
			},
		},
	]
	const dataList = ref([]);
	onShow(async () => {
		await init();
		await getBusinessTalkData();
	})
	// onLoad(async() => {
	// 	await init();
	// 	await getBusinessTalkData();
	// })
	//获取洽谈单列表
	const getBusinessTalkData = async (e) => {
		if (!e) {
			CurrentPage.value = 1;
		}
		const req = {
			IsNotPage: false,
			CurrentPage: CurrentPage.value,
			PageSize: PageSize.value,
			WhereList: [
				{ c_col: "c_talk_status", c_oper: "不等于", c_value: '2', c_logic: "而且" },
			]
		}
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await service.request('管易通洽谈记录登记单', 'EnjoyQueryList', req);
		uni.hideLoading();
		CurrentPage.value = res.CurrentPage; //第几页
		PageSize.value = res.PageSize; //每页10条
		RowsCount.value = res.RowsCount; //总条数
		PageCount.value = res.PageCount; //总页数
		// if (res && res.ReturnObject) {

		// }

		const ObjectData = res.ReturnObject;
		const _data = ObjectData.map(x => {
			return {
				...x,
				c_business_charge: (getRelatedName('rdsDeparts', x.c_adno) || '') + ' ' + (getRelatedName('rdsUsers', x.c_talk_userno) || ''),
				cover: !x.c_brand_logo_pic ? '../../../static/img/no_image.png' : service.getBaseUrl() + '/File/DownLoadFile/' + x.c_brand_logo_pic,
			}
		})
		if (res.CurrentPage == 1) {
			dataList.value = _data;
		} else {
			dataList.value = dataList.value.concat(_data);
		}
	}
	const onRefresh = async (e) => {
		if (freshing.value) return;
		freshing.value = true;
		if (!triggered.value) {//界面下拉触发，triggered可能不是true，要设为true
			triggered.value = true;
			await getBusinessTalkData();
		}
		setTimeout(() => {
			triggered.value = false;//触发onRestore，并关闭刷新图标
			freshing.value = false;
		}, 1000)
	}
	const lower = async () => {
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			await getBusinessTalkData(true);
		}
	}
	const getTagType = (status) => {
		let type = "";
		switch (status) {
			case '0':
				type = "primary";
				break;
			case '1':
				type = "success";
				break;
			case '2':
				type = "warning";
				break;
		}
		return type;
	}
	const addTalk = () => {
		uni.navigateTo({
			url: './addTalk'
		});
	}
	const carryTalk = (item) => {
		uni.navigateTo({
			url: `./addTalk?c_id=${item.c_id}&c_status=${item.c_status}&c_title=继续洽谈`
		});
	}
	const openDetail = (item) => {
		uni.navigateTo({
			url: `./detail?c_id=${item.c_id}`
		});
	}
</script>

<style lang="scss" scoped>
	@import '../../../main.scss';

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-image: url(../../../static/img/rdsImgs/top_zsqt_blue.jpg);
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
		height: 420rpx;
	}

	.circle-container {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		border-radius: 50%;
		background: var(--theme-bgc-color); //linear-gradient(135deg, #02B7E6 0%, #36A9F3 100%)
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		align-content: space-around;
	}

	.e-attachment {
		align-items: center;
		justify-content: center;
		display: flex;

		&__image {
			width: 208rpx;
			height: 208rpx;
			margin: 6px 6px;
			border-radius: 5px;
		}
	}

	.e-image {
		border-radius: 10rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.topbg {
		background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);
		display: flex;
		flex-direction: row;
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 24rpx 28rpx;
		justify-content: space-between;
		align-items: center;
		margin-top: -80rpx;
	}

	.top-box {
		display: flex;
		justify-content: flex-start;
		flex-flow: column;

		&__text-title {
			overflow-wrap: break-word;
			color: rgba(0, 0, 0, 1);
			font-size: 30rpx;
			font-family: PingFangSC-Semibold;
			font-weight: bold;
			text-align: center;
			white-space: nowrap;
			line-height: 42rpx;
			margin-right: 220rpx;
		}

		&__text-content {
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 20rpx;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 28rpx;
			margin-top: 8rpx;
		}
	}

	.topimg {
		width: 60rpx;
		height: 60rpx;
	}

	.tag-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;
		margin: 12rpx 0rpx;
	}

	.image-min {
		width: 100%;
		height: 200rpx;
		opacity: 0.6;
	}

	.scroll-box {
		height: 100%;
	}

	.footer-view {
		height: 100%;
		background: $uni-bg-color;
	}

	.no-data-text {
		text-align: center;
		color: #cccccc;
		font-size: 24rpx;
		margin-top: -20rpx;
	}
</style>